<template>
  <header :class="['header', { black: black }]">
    这是头部
    <button @click="dark" :class="{ bai: n === 1 }">dark</button>
    <button @click="white" :class="{ bai: n === 2 }">
      white
    </button>
  </header>
</template>

<script>
export default {
  data() {
    return {
      n: 0,
    }
  },
  props: {
    black: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    dark() {
      this.$emit('update:black', true)
      this.n = 1
    },
    white() {
      this.$emit('update:black', false)
      this.n = 2
    },
  },
}
</script>

<style>
.header {
  width: 100%;
  padding: 11px 24px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
  background: #fff;
}
.bai {
  background: green;
  color: #fff;
}
</style>
